<template>
  <div class="employee-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">员工姓名：</div>
      <el-input
        v-model="params.name"
        clearable
        @clear="getList"    
        placeholder="请输入内容"
        class="search-main"
      />
      <el-button type="success" @click="getList" icon="el-icon-search">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="success" @click="open" icon="el-icon-circle-plus"
        >添加员工</el-button
      >
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="employeeList">
        <el-table-column type="index" label="序号" width="" />
        <el-table-column label="员工姓名" prop="name" width="100" />
        <el-table-column label="登录账号" prop="userName" width="100" />
        <el-table-column label="联系方式" prop="phonenumber" width="150" />
        <el-table-column label="角色" prop="roleName" width="150" />
        <el-table-column label="状态" prop="status" width="100">
          <template #default="scope">
            {{ scope.row.status == 0 ? "禁用" : "启用" }}
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="createTime" />
        <el-table-column label="操作" fixed="right" width="295">
          <template #default="scope">
            <el-button
              size="mini"
              type="success"
              @click="edit(scope.row)"
              icon="el-icon-edit-outline"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="del(scope.row.id)"
              icon="el-icon-delete"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="warning"
              @click="resetPwd(scope.row.id)"
              icon="el-icon-refresh-right"
              >重置密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 4, 6, 8, 10]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      />
    </div>
    <el-dialog
      :title="form.id ? '编辑员工' : '添加员工'"
      :visible="flag"
      @close="handleClose"
      top="50px"
      width="40%"
    >
      <div style="display: flex; flex-direction: column; align-items: center;">
        <el-form ref="form" :model="form" :rules="rules" style="width: 100%;">
          <el-form-item label="员工姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入员工姓名" clearable style="width: 500px;"/>
          </el-form-item>
          <el-form-item label="登录账号" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入登录账号" clearable style="width: 500px;"/>
          </el-form-item>
          <el-form-item label="联系方式" prop="phonenumber">
            <el-input v-model="form.phonenumber" placeholder="请输入联系方式" clearable style="width: 500px;"/>
          </el-form-item>
          <el-form-item label="分配角色" prop="roleId">
            <el-select v-model="form.roleId" placeholder="请选择角色" style="width: 200px;">
              <el-option
                v-for="item in formList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="员工状态" prop="status">
            <template>
              <el-radio-group v-model="form.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
          <div style="display: flex; justify-content: center; margin-top: 20px;">
            <el-button type="info" @click="handleClose" icon="el-icon-circle-close">取消</el-button>
            <el-button @click="confirm" type="primary" style="margin-left: 20px;" icon="el-icon-circle-check">确认</el-button>
          </div>
        </el-form>
        <div style="margin-top: 20px; font-size: 15px; color: #b06c69;">* 默认密码为：123456</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEmployeeAPI,
  addEmployeeAPI,
  downEmployeeAPI,
  delEmployeeAPI,
  editEmployeeAPI,
  resetPwdAPI,
} from "@/api/employee";
export default {
  name: "Employee",
  data() {
    return {
      radio: 2,
      flag: false,
      employeeList: [],
      total: 0,
      params: {
        name: "",
        page: 1,
        pageSize: 10,
      },
      formList: [],
      form: {
        roleId: "",
        name: "",
        userName: "",
        phonenumber: "",
        roleName: "",
        status: "",
      },
      rules: {
        name: [{ required: true, message: "员工姓名不能为空！", trigger: ['blur','change'] }],
        userName: [{ required: true, message: "登录账号不能为空！", trigger: ['blur','change'] }],
        phonenumber: [{ required: true, message: "联系方式不能为空！", trigger: ['blur','change']}],
        roleId: [{ required: true, message: "角色分配不能为空！", trigger: 'blur'}],
        status: [{ required: true, message: "请选择角色状态！", trigger: ['blur','change'] }],
      },
      form2: {
        roles: "",
      },
    };
  },
  mounted() {
    // 页面加载时调用获取列表数据的方法
    this.getList();
    this.downList();
  },
  methods: {
    resetPwd(id) {
      this.$confirm("是否确认重置该员工的密码？").then(() => {
        resetPwdAPI(id)
          .then(() => {
            this.$message.success("密码重置成功！");
          })
          .catch(() => {
            this.$message.error("密码重置失败！");
          });
      });
    },
    edit(row) {
      this.flag = true;
      this.form.id = row.id;

      this.form.name = row.name;
      this.form.userName = row.userName;
      this.form.phonenumber = row.phonenumber;
      this.form.roleId = row.roleId;
      // this.form.roleName = row.roleName;
      this.form.status = row.status;
    },
    del(id) {
      // console.log("ppp");
      this.$confirm("是否确认删除？").then(() => {
        delEmployeeAPI(id)
          .then(() => {
            // if()
            this.$message.success("删除成功！");
            this.getList();
          })
          .catch(() => {
            this.$message.error("删除失败！");
          });
      });
      // .catch(() => {});
    },

    //下拉列表
    downList() {
      downEmployeeAPI()
        .then((res) => {
          console.log(res);
          this.formList = res.data;
        })
        .catch(() => {
          this.$message.error("下拉列表获取出错！");
        });
    },
    open() {
      this.flag = true;
    },
    confirm() {
      this.$refs.form.validate((ok) => {
        if (ok) {
          if (this.form.id) {
            editEmployeeAPI(this.form).then(() => {
              this.$message.success("编辑成功！");
              this.getList();
              this.flag = false;

              this.form.name = ""
              this.form.userName = ""
              this.form.phonenumber = ""
              this.form.roleName = ""
              this.form.status = ""
            });
          } else {
            addEmployeeAPI(this.form).then(() => {
              this.$message.success("添加成功！");
              this.getList();
              this.flag = false;
              this.form.name = ""
              this.form.userName = ""
              this.form.phonenumber = ""
              this.form.roleName = ""
              this.form.status = ""
            }).catch((error) => {
            this.$message.error(error.response.data.msg)
          })
          }
        }
      });
    },
    getList() {
      getEmployeeAPI(this.params).then((res) => {
        this.employeeList = res.data.rows;
        this.total = res.data.total;
      });
    },
    handleClose() {
      this.flag = false;
      this.form.name = ""
              this.form.userName = ""
              this.form.phonenumber = ""
              this.form.roleName = ""
              this.form.status = ""
    },
    handleSizeChange(pageSize) {
      (this.params.page = 1), (this.params.pageSize = pageSize), this.getList();
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.employee-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container {
  margin: 10px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.form-container {
  padding: 0px 80px;
}
</style>
